import React, { useEffect, useState } from "react";
import Taro, { useReachBottom, usePullDownRefresh } from "@tarojs/taro";
import { View } from "@tarojs/components";
import Advertisement from "@/components/Advertisement";
import ItemCard from "@/components/ItemCard";
import ListStatusInfo from "@/components/ListStatusInfo";
import { MajorItem } from "@/src/pages/index/data";
import SearchWrapper from "@/components/SearchWrapper";
import customNavigate from "@/common/hooks/useNavigate";
import * as globalData from "@/src/globalData";

import * as api from "./api";
import "../majorList/index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<MajorItem[]>([]);
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState<number | null>(null);
  const [searchInfo, setSearchInfo] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const goSchoolList = () => {
    customNavigate("/pages/school/index");
  };

  const getData = async (current_page = 1) => {
    try {
      setLoading(true);
      Taro.showNavigationBarLoading();
      let search_info = {
        ...searchInfo,
      };
      if (Taro.getStorageSync("city")) {
        search_info.city = Taro.getStorageSync("city")[1];
        search_info.province = Taro.getStorageSync("city")[0];
      }
      const { result, status } = await api.university_major_search({
        search_info: JSON.stringify(search_info),
        current_page: current_page,
      });
      if (status === "ok") {
        if (current_page === 1) {
          setCurrent(1);
          setData([].concat(result.data_list));
        } else {
          setData(data.concat(result.data_list));
        }

        setTotal(result.total);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      Taro.hideNavigationBarLoading();
      Taro.stopPullDownRefresh();
      setLoading(false);
    }
  };

  usePullDownRefresh(() => {
    getData(1);
  });

  useReachBottom(() => {
    if (data.length < total) {
      setCurrent(current + 1);
      getData(current + 1);
    }
  });

  useEffect(() => {
    getData(1);
  }, [searchInfo]);

  console.log("data--------->>>", data);
  return (
    <View className="major-list-page">
      <SearchWrapper
        onSearch={(value) => {
          setSearchInfo({
            ...searchInfo,
            name: value,
          });
        }}
        value={searchInfo.name}
        onSelectRegion={(value) => {
          setSearchInfo({ ...searchInfo });
        }}
      />
      <Advertisement className="ad-space" label="index_mid" />
      <View className="content-wrapper">
        {data.map((item) => (
          <ItemCard
            key={item.id}
            {...item}
            agentList={item.agent_list}
            isShowAgent
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/schoolDetail/index?school_id=${item.id}`,
              });
            }}
          />
        ))}

        {/* total loading */}

        <ListStatusInfo
          total={total}
          dataLength={data.length}
          loading={loading}
        />
      </View>
    </View>
  );
};

export default Index;
